JS - language picker - 01

revision: April 13, 2024

Have a look at the HTML and CSS settings for the different approaches

example 1 - display settings: flex - block - inline ("id")

"Een beeld is meer dan duizend woorden waard" is een Engelstalig adagium dat betekent dat complexe en soms meerdere ideeën kunnen worden overgebracht door een enkel "stilstaand beeld", die de betekenis of essentie effectiever uitdrukt dan een loutere verbale beschrijving. De Noorse toneelschrijver Henrik Ibsen zei eerst: "Duizend woorden laten niet dezelfde diepe indruk achter als een enkele akte." Na zijn dood in 1906 werd dit citaat geplagieerd en para-geformuleerd in wat we nu weten.

"A picture is worth a thousand words" is an English language adage meaning that complex and sometimes multiple ideas can be conveyed by a single "still image", which expresses its meaning or essence more effectively than a mere verbal description. Norwegian playwright Henrik Ibsen first said "A thousand words leave not the same deep impression as does a single deed." After his death in 1906 this quote was plagiarized and para-phrased into what we know now.

"一幅画值千言万语"是一句英语格言，意思是复杂、有时多思想可以通过一个"静止图像"来传达，它比单纯的口头描述更有效地表达其意义或本质。挪威剧作家亨里克·伊布森首先说："千言万语给人留下的印象与单一的一言不语。1906年他去世后，这句话被剽窃，并抄袭到我们现在所了解的。

code:

:
            <div class="language">
                <button onclick="document.getElementById('ned').style.display='flex'">Nederlands</button><br>
                <button onclick="document.getElementById('eng').style.display='block'">English</button><br>
                <button onclick="document.getElementById('chn').style.display='inline'">中文</button><br>
            </div>
            <p id="ned" lang="nl"><span><em>"Een beeld is meer dan duizend woorden waard"</em></span> is een.. weten.</p> 
            <p id="eng" lang="en"><span><em>"A picture is worth a thousand words"</em></span>  is ... now. </p>
            <p id="chn" lang="zh"><span><em>"一幅画值千言万语"</em></span>是一句英语格言，...所了解的。</p>
            <style>
                button{font-size: 1vw; color:blue; background-color: lightgreen;margin-bottom: 1vw;;margin-left: 3%;}
                button:hover{background-color:red; cursor: pointer;}
                p[lang=nl]{display: none;padding-left: 3vw;}
                p[lang=en]{display: none;padding-left: 3vw;}
                p[lang=zh]{display: none;padding-left: 3vw;} 
            </style>

example 2 - display settings: flex - inline - block ("id")

"Een beeld is meer dan duizend woorden waard" is een Engelstalig adagium dat betekent dat complexe en soms meerdere ideeën kunnen worden overgebracht door een enkel "stilstaand beeld", die de betekenis of essentie effectiever uitdrukt dan een loutere verbale beschrijving. De Noorse toneelschrijver Henrik Ibsen zei eerst: "Duizend woorden laten niet dezelfde diepe indruk achter als een enkele akte." Na zijn dood in 1906 werd dit citaat geplagieerd en para-geformuleerd in wat we nu weten.

code:

            <div class="taal">
                <button class="button1" onclick="showHide1()">Nederlands</button>
                <button class="button2" onclick="showHide2()">English</button>
                <button class="button3" onclick="showHide3()">中文</button>
            </div>
            <p id="nl" lang="nl"><span><em></em>"Een beeld is...weten.</p> 
            <p id="en" lang="en"><span><em>"A picture is ... now. </p>
            <p id="cn" lang="zh"><span><em>"一幅画...了解的。</p>
            <script>
                function showHide1() {document.getElementById("nl").style.display = "flex";}
                function showHide2() {document.getElementById("en").style.display = "inline";}
                function showHide3() {document.getElementById("cn").style.display = "block";}
            </script>
            <style>
                button{font-size: 1vw; color:blue; background-color: lightgreen;margin-bottom: 1vw;;margin-left: 3%;}
                button:hover{background-color:red; cursor: pointer;}
                p[lang=nl]{display: none;padding-left: 3vw;}
                p[lang=en]{display: none;padding-left: 3vw;}
                p[lang=zh]{display: none;padding-left: 3vw;}
                .button1, .button2, .button3{background-color:lightgreen; color: blue; font-size: 1vw; margin-left: 3%;}
                .button1:hover, .button2:hover, .button3:hover{background-color:darkgreen; cursor: pointer;}
            </style>

example 3 - display settings: flex - block - inline ("id")

code:

            <p class="langue" id="ndl"lang="nl"><span><em>"Een beeld ... weten.</p> 
            <p class="langue" id="egl"lang="en"><span><em>"A picture is ... know now. </p>
            <p class="langue" id="chi" lang="zh"><span><em>"一幅画...了解的。</p>
            <div class="langue">
                <button id="button4" onclick="showHide4()">Nederlands</button>
                <button id="button5" onclick="showHide5()">English</button>
                <button id="button6" onclick="showHide6()">中文</button>
            </div>
            <script>
                function showHide4() {
                    document.getElementById("ndl").style.display = "flex";
                    document.getElementById("egl").style.display = "none";
                    document.getElementById("chi").style.display = "none";
                }
                function showHide5() {
                    document.getElementById("egl").style.display = "inline";
                    document.getElementById("ndl").style.display = "none";
                    document.getElementById("chi").style.display = "none";
                }
                function showHide6() {
                    document.getElementById("chi").style.display = "block";
                    document.getElementById("ndl").style.display = "none";
                    document.getElementById("egl").style.display = "none";
                }
            </script>
            <style>
                button{font-size: 1vw; color:blue; background-color: lightgreen;margin-bottom: 1vw;;margin-left: 3%;}
                button:hover{background-color:red; cursor: pointer;}
                p[lang=nl]{display: none;padding-left: 3vw;}
                p[lang=en]{display: none;padding-left: 3vw;}
                p[lang=zh]{display: none;padding-left: 3vw;}
                .button4, .button5, .button6{background-color:silver; color: brown; font-size: 1vw; margin-left: 3%;}
                .button4:hover, .button5:hover, .button6:hover{background-color:cyan; cursor: pointer;}
                .show{display:block;}

            </style>

example 4 - display settings: inline - block - flex ("class")

code:

            <button onclick="document.getElementsByClassName('nederlands')[0].style.display='inline'">Nederlands</button>
            <button onclick="document.getElementsByClassName('english')[0].style.display='block'">English</button>
            <button onclick="document.getElementsByClassName('chinese')[0].style.display='flex'">中文</button><br>
            <p class="nederlands" lang="nl"><span><em><span><em>"Een beeld ...nu weten.</p>
            <p class="english" lang="en"><span><em>"A picture is... know now. </p>
            <p class="chinese" lang="zh"><span><em>"一幅画...现在所了解的。</p>
            <style>
                button{font-size: 1vw; color:blue; background-color: lightgreen;margin-bottom: 1vw;;margin-left: 3%;}
                button:hover{background-color:red; cursor: pointer;}
            </style>

example 5 - display settings: flex - block - inline ("class")

code:

            <div class="langue">
                <button id="button4" onclick="showHide7()">Nederlands</button>
                <button id="button5" onclick="showHide8()">English</button>
                <button id="button6" onclick="showHide9()">中文</button>
            </div>
        
            <p class="nederlands" lang="nl"><span><em><span><em>"Een beeld is meer dan duizend woorden waard"</em></span> is een Engelstalig adagium dat betekent dat complexe en 
            \soms meerdere ideeën kunnen worden overgebracht door een enkel "stilstaand beeld", die de betekenis of essentie effectiever uitdrukt dan een loutere verbale beschrijving. De Noorse 
            toneelschrijver Henrik Ibsen zei eerst: "Duizend woorden laten niet dezelfde diepe indruk achter als een enkele akte." Na zijn dood in 1906 werd dit citaat geplagieerd en para-geformuleerd in 
            wat we nu weten.</p><br>
            <p class="english" lang="en"><span><em>"A picture is worth a thousand words"</em></span>  is an English language adage meaning that complex and sometimes multiple ideas can be 
            conveyed by a single "still image", which expresses its meaning or essence more effectively than a mere verbal description. Norwegian playwright Henrik Ibsen first said "A thousand words leave
             not the same deep impression as does a single deed." After his death in 1906 this quote was plagiarized and para-phrased into what we know now. </p><br>
            <p class="chinese" lang="zh"><span><em>"一幅画值千言万语"</em></span>是一句英语格言，意思是复杂、有时多思想可以通过一个"静止图像"来传达，它比单纯的口头描述更有效地表达其意义或本质。
            挪威剧作家亨里克·伊布森首先说："千言万语给人留下的印象与单一的一言不语。1906年他去世后，这句话被剽窃，并抄袭到我们现在所了解的。</p>
        
        
            <script>
                function showHide7() {
                    document.getElementsByClassName("nederlands")[1].style.display = "flex";
                    document.getElementsByClassName("english")[1].style.display = "none";
                    document.getElementsByClassName("chinese")[1].style.display = "none";
                }
                function showHide8() {
                    document.getElementsByClassName("nederlands")[1].style.display = "none";
                    document.getElementsByClassName("english")[1].style.display = "block";
                    document.getElementsByClassName("chinese")[1].style.display = "none";
                }
                function showHide9() {
                    document.getElementsByClassName("nederlands")[1].style.display = "none";
                    document.getElementsByClassName("english")[1].style.display = "none";
                    document.getElementsByClassName("chinese")[1].style.display = "inline";
                }
            </script>
            <style>
                button{font-size: 1vw; color:blue; background-color: lightgreen;margin-bottom: 1vw;;margin-left: 3%;}
                button:hover{background-color:red; cursor: pointer;}
                p[lang=nl]{display: none;padding-left: 3vw;}
                p[lang=en]{display: none;padding-left: 3vw;}
                p[lang=zh]{display: none;padding-left: 3vw;}
                .button4, .button5, .button6{background-color:silver; color: brown; font-size: 1vw; margin-left: 3%;}
                .button4:hover, .button5:hover, .button6:hover{background-color:cyan; cursor: pointer;}
                .show{display:block;}

            </style>